<template>
  <x-main>
    <view class="header x-full-container">
      <view class="x-row-start">
        <view class="avatar x-center">
          <img src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024">
        </view>
        <view class="info">
          <view class="name">{{user.name}}<text class="type">个人商户</text></view>
          <view class="account">支付宝账号：{{companyInfo.alipayAccount || '未绑定'}}</view>
        </view>
      </view>

      <view @click="onLogout" class="logout">退出账号</view>
    </view>

    <view class="menu">
      <x-cell @click="onClick('store')" title="门店管理" isLink></x-cell>
      <x-cell @click="onClick('staff')" :border="false" title="成员管理" isLink></x-cell>
    </view>
  </x-main>
</template>

<script setup>
import companyStore from '@/stores/modules/company'
import userStore from '@/stores/framework/user';
import {onLoad} from "@dcloudio/uni-app";
const CompanyStore = companyStore();
import {storeToRefs} from "pinia";
const UserStore = userStore();
const {user} = storeToRefs(UserStore);
const {companyInfo} = storeToRefs(CompanyStore);
import {Msg, Helper} from 'core';
onLoad(e => {
  CompanyStore.getInfo();
  UserStore.brief();
})
const onClick = (type) => {
  uni.navigateTo({url: `/pages/mine/${type}/index`})
}

const onLogout = () => {
  Msg.confirm("您确认退出当前系统？").then(async c => {
    await UserStore.logout();
    uni.navigateTo({url: "/pages/login"});
  });
}
</script>

<style scoped lang="less">
.header {
  background-color: #fff;
  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    margin-left: 10rpx;
    .name {
      font-size: 32rpx;
      color: #000000;
      font-weight: bold;
    }

    .type {
      font-size: 24rpx;
      color: #999999;
      margin-left: 20rpx;
    }

    .account {
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #999999;
    }
  }

  .logout{
    border-top: 1px solid #eeeeee;
    padding-top: 20rpx;
    margin-top: 20rpx;
    text-align: center;
    color: #999;
    font-size: 28rpx;
  }
}

.menu {
  margin-top: 40rpx;
}
</style>
